<template>
  <card :title="title" more @handleMore="toApply">
    <template v-slot:content>
      <div class="content">
        <div class="box" v-for="(item,index) in boxs" :key="index" @click="toApply(item)">
          <svg-icon class="box_icon" :icon-class="item.svgName" />
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </template>
  </card>
</template>

<script>
import card from "@/views/homePage/components/card";
export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      boxs: [
        {
          svgName: "caigou",
          title: "采购申请"
        },
        {
          svgName: "bijia",
          title: "比价申请"
        },{
          svgName: "hetong",
          title: "合同申请"
        },
        {
          svgName: "chuchai",
          title: "出差报销"
        }
        // {
        //   svgName: "qingjia",
        //   title: "请假"
        // },
        // {
        //   svgName: "renshi",
        //   title: "招聘"
        // },
        // {
        //   svgName: "caiwu",
        //   title: "预算"
        // }
      ]
    };
  },
  components: {
    card
  },
  methods: {
    toApply(apply) {
      console.log(apply);
      this.$router.push({ path: "/oa2/apply", query: { apply: apply } });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .box {
    cursor: pointer;
    width: 14%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .box_icon {
      //   margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      font-size: 0.5rem;
    }
    .title {
      font-weight: 700;
    }
    &:hover {
      transform: translateY(-10%);
      // border-radius: 0.125rem;
      // background-color: #f3f6fa;
    }
  }
}
</style>
